import style from './Header.module.scss';
import { FC } from 'react';
import Link from "next/link";
import Image from 'next/image';

import InputSearchProject from "@/components/ui/InputSearchProject";
import {ArrowRight, ShoppingCart} from 'lucide-react';
import ButtonProject from "@/components/ui/ButtonProject/ButtonProject";

interface Props {
  className?: string;
}
const Header:FC<Props> = ({ className}) => {
  return (
    <div className={`${className} + ${style.header}`}>

      {/* Левая часть */}
      <Link href="/">
        <div className={style.header__left}>
          <Image src="/logo-abstr.png" alt="Logo" width={40} height={40} />
          <div className={style.header__titleWrapper}>
            <h1 className={style.header__title}>Abstract Project</h1>
            <p className={style.header__subtitle}>проект для бизнеса</p>
          </div>
        </div>
      </Link>

      <div className={style.header__searchWrapper}>
        <InputSearchProject />
      </div>

      {/* Правая часть */}
      <div className={style.header__right}>

        <ButtonProject
          title={'Войти'}
          size={'large'}
        />

        <button className={style.header__cartButtonWrapper}>
          <p>
            520 ₽
          </p>
          <ShoppingCart size={20} />
          <p>
            3
          </p>
          {/*<ArrowRight size={20} />*/}
        </button>
      </div>
    </div>
  );
};

export default Header;
